<template>
  <div>

  </div>
</template>

<script>
import {Polygon} from "maptalks";

export default {
  name: 'ctMapPolygon',
  components: {},
  props: {
    polygonPointGroup: {
      type: Array,
      default() {
        return [];
      },
    },
    zIndex: {}
  },
  data: () => ({
    parentMap: null,
    polygonVectorLayer: null,
    pArr: []
  }),
  methods: {
    reRender() {
      const vue = this;
      this.$nextTick(() => {
        const {firstLayer} = vue.$parent;
        const map = new Map();
        vue.polygonPointGroup.forEach(function (polygon) {
          const polygonSub = vue.createPolygon(polygon.point, polygon.pSymbol);
          polygonSub.polygonId = polygon.polygonId
          polygonSub.pType = polygon.pType
          polygonSub.addTo(firstLayer);
          map.set(polygonSub.polygonId, polygonSub)
          vue.pArr.push(polygonSub)
        })
        vue.$emit('polygonCompleted', map)
      });
    },
    createPolygon(polygonPointGroup, pSymbol) {
      if (!pSymbol) {
        pSymbol = {
          'lineColor': '#34495e',
          'lineWidth': 2,
          'polygonFill': 'rgb(135,196,240)',
          'polygonOpacity': 0.6
        }
      }
      const polygon = new Polygon(polygonPointGroup, {
        visible: true,
        editable: true,
        cursor: 'pointer',
        shadowBlur: 0,
        shadowColor: 'black',
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null, // force dragging stick on a axis, can be: x, y
        symbol: pSymbol,
        zIndex: this.zIndex == null ? 0 : this.zIndex
      })
      return polygon;
    },
  },
  mounted() {
    this.reRender()
  },
  watch: {
    polygonPointGroup: {
      immediate: false,
      handler: function (v) {
        if (this.pArr) {
          this.pArr.forEach(function (value) {
            value.remove()
          })
          this.pArr = []
        }
        this.reRender()
      },
    },
  },
};
</script>

